<div class="sub-main-container">
    <div class="search-wrap">
        <button nz-button nzType="primary" class="add-btn" (click)="directToSketchMap()">
            切换至展示图
        </button>
        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
            <nz-form-item>
                <nz-form-label>名称</nz-form-label>
                <nz-form-control>
                    <input formControlName="sectionName" nz-input placeholder="断面名称"/>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>管理单位</nz-form-label>
                <nz-form-control>
                    <nz-select formControlName="sectionId" nzAllowClear nzPlaceHolder="管理所"
                               style="width: 170px;">
                        <nz-option nzLabel="跃进渠一所" nzValue="168"></nz-option>
                        <nz-option nzLabel="跃进渠二所" nzValue="169"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <button nz-button nzType="primary" (click)="queryInfo(true)"><i nz-icon nzType="search"></i>查询
                    </button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>

    <div class="main-wrap">
        <nz-table #dataTable
                  class="main-table"
                  [nzData]="tableData"
                  [nzTotal]="total"
                  [(nzPageIndex)]="pageNum"
                  [nzPageSize]="pageSize"
                  [nzFrontPagination]="false"
                  [nzLoading]="loading"
                  nzBordered
                  (nzPageIndexChange)="queryInfo()"
                  nzSize="middle">
            <thead>
            <tr>
                <!--                <th>连接状态</th>-->
<!--                <th>管理所</th>-->
                <th>断面名称</th>
                <th>水位（m）</th>
                <th>每小时流量（m³/H）</th>
                <th>瞬时流量（m³/s）</th>
                <th>累计流量（m³）</th>
                <th>电压（V）</th>
                <th>记录时间</th>
                <th>历史记录</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of dataTable.data">
                <!--                <td [ngClass]="data.onlinestatus === 'on' ? 'green':'red'">{{ data.onlinestatus === 'on' ? '在线' : '不在线' }}</td>-->
<!--                <td>{{data.stName}}</td>-->
                <td>{{ data.stationName }}</td>
                <td>{{ data.shuiwei }}</td>
                <td>{{ data.meixiaoshiliuliang }}</td>
                <td>{{ data.shunshiliuliang }}</td>
                <td>{{ data.zongliuliang }}</td>
                <td>{{ data.dianya }}</td>
                <td>{{ data.time | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td>
                    <a (click)="openModal(data)">查看</a>
                </td>
            </tr>
            </tbody>
        </nz-table>
    </div>

    <nz-modal nzClassName="custom-modal" nzWidth="80%" [(nzVisible)]="modalShow"
              nzTitle="历史记录"
              [nzFooter]="null" (nzOnCancel)="onCancel()">
        <div class="search-wrap">
        <form nz-form [nzLayout]="'inline'" [formGroup]="historyForm">
            <nz-form-item>
                <nz-form-label>选择日期</nz-form-label>
                <nz-form-control>
                    <nz-range-picker formControlName="rangePickerTime" [nzAllowClear]="false" [nzPlaceHolder]="['起始日期', '截止日期']">
                    </nz-range-picker>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <button nz-button nzType="primary" (click)="queryHistoryInfo()"><i nz-icon nzType="search"></i>查询
                    </button>
                    <button nz-button nzType="primary" (click)="exportFile()" style="margin-left: 10px"><i nz-icon nzType="file-excel"></i>导出
                    </button>
                </nz-form-control>
            </nz-form-item>
        </form>
        </div>
        <nz-table #myTable
                  [nzData]="historyTableData"
                  nzBordered
                  nzSize="middle">
            <thead>
            <tr>
                <th>记录时间</th>
                <th>水位（m）</th>
                <th>每小时流量（m³/H）</th>
                <th>瞬时流量（m³/s）</th>
                <th>累计流量（m³）</th>

            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of myTable.data" class="editable-row">
                <td>{{ data.time | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td>{{ data.shuiwei }}</td>
                <td>{{ data.meixiaoshiliuliang }}</td>
                <td>{{ data.shunshiliuliang }}</td>
                <td>{{ data.zongliuliang }}</td>

            </tr>
            </tbody>
        </nz-table>
    </nz-modal>
</div>
